<template>
  <div class="wrap1">
    <div class="top">
      <!-- 头部 -->
      <div class="box">
        <top-nav-view></top-nav-view>
      </div>
      <!-- 导航栏 -->
      <div class="box1">
        <header-view></header-view>
      </div>
    </div>
    <div class="main">
      <!-- 面包屑 -->
      <breadcrumb></breadcrumb>
      <!-- 内容 -->
      <maintable></maintable>
    </div>
    <!-- 猜你喜欢 -->
    <you-like-view></you-like-view>
    <!-- 页脚 -->
    <footer-view></footer-view>
  </div>
</template>

<script>
import HeaderView from "@/components/HeaderView.vue";
import breadcrumb from "./components/breadcrumb.vue";
import Maintable from "./components/maintable.vue";
import TopNavView from "@/components/TopNavView.vue";
import YouLikeView from "@/components/YouLikeView.vue";
import FooterView from "@/components/FooterView.vue";
export default {
  components: {
    breadcrumb,
    Maintable,
    HeaderView,
    TopNavView,
    YouLikeView,
    FooterView,
  },
};
</script>,
    

<style lang="scss" scoped>
.wrap1 {
  background: #f5f5f5;
}
.box {
  width: 100%;
  background: #333;
}
.box1 {
  width: 100%;
  background: white;
}
.main {
  width: 1240px;
  margin: 0 auto;
}
</style>